<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="icon" href="https://ae01.alicdn.com/kf/U65ab46d2dce144d4b32e2bf7126a6d6dL.jpg">
    <title>响应式布局</title>
    <style>
         @media all and (min-width:1200px){
            *{
                margin: 0;
                padding: 0;
            }
    
            #main>div{
                padding:10px;
                height: 200px;
            }
    
            img{
                width: 100%;
                height: 160px;
                margin-bottom: 10px;
            }
    
            a:visited{
                color: blue;
            }

            a{
                color: blue;
            }

            .link{
                text-align: center;
                background-color: rgb(214,225,215);
                margin-bottom: 10px;
            }

            .arti{
                background-color: rgb(125,145,56);
                margin-bottom: 10px;
                margin-left: 25%;
            }
    
            .fruit{
                text-align: center;
                background-color: rgb(211,115,43);
                line-height: 30px;
                margin-bottom: 10px;
                color: blue;
                margin-left: -75%;
            }
    
            footer{
                background-color: rgb(215,49,58);
                padding: 10px 0;
            }
        }

        @media all and (min-width:480px) and (max-width:1200px){
            *{
                margin: 0;
                padding: 0;
            }
    
            #main>div{
                padding:10px;
                height: 200px;
            }
    
            img{
                width: 100%;
                height: 160px;
                margin-bottom: 10px;
            }
    
            a:visited{
                color: blue;
            }
            
            .arti{
                background-color: rgb(125,145,56);
                margin-bottom: 10px;
            }

            a{
                color: blue;
            }

            a:visited{
                color: blue;
            }
    
            .fruit{
                text-align: center;
                background-color: rgb(211,115,43);
                line-height: 30px;
                margin-bottom: 10px;
                color: blue;
            }
    
            .link{
                text-align: center;
                background-color: rgb(214,225,215);
                margin-bottom: 10px;
            }
    
    
            footer{
                background-color: rgb(215,49,58);
                padding: 10px 0;
            }
        }

        @media all and (max-width:480px){
            *{
                margin: 0;
                padding: 0;
            }
    
            #main>div{
                padding:10px;
                height: 200px;
            }
    
            img{
                width: 100%;
                height: 160px;
                margin-bottom: 10px;
            }

            a{
                color: blue;
            }
    
            a:visited{
                color: blue;
            }
            
            .arti{
                background-color: rgb(125,145,56);
                margin-bottom: 10px;
            }
    
            .fruit{
                text-align: center;
                background-color: rgb(211,115,43);
                line-height: 30px;
                margin-bottom: 10px;
                color: blue;
            }
    
            .link{
                text-align: center;
                background-color: rgb(214,225,215);
                margin-bottom: 10px;
            }
    
            footer{
                background-color: rgb(215,49,58);
                padding: 10px 0;
            }
        }
    </style>
</head>
<body>
    <script>alert("如果按照word中所给，480,768分级，则中间层范围太小，无法清晰得到效果，所以改成了480，1200，显示更为直观")</script>
    <div class="container">
        <h1 class="text-center">饮食与健康</h1>
        <div>
            <img src="https://www.hualigs.cn/image/60a10d25e76a1.jpg" alt="food">
        </div>
        <div id="main">
            <div class="col-sm-12 col-lg-6 col-md-12 arti">
                <h2 class="text-center">健康饮食的重要性</h2>
                <p>饮食健康对大脑健康有很重要的影响，而且食品营养是家庭能够办到的，也是简易而切实可行的。饮食健脑首先得了解人体脑细胞需要什么营养素。
                    大脑需要的营养素主要有脂质，乃指脂肪中的不饱和脂肪酸，主要为亚油酸和亚麻酸；其次是蛋白质，尤其是蛋白质中的谷胱甘肽，还有糖类，
                    即已被人体消化系统分解成的葡萄糖；以及B族维生素、维生素C、维生素E和钙质。
                </p>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12 fruit">
                <a href="#">蔬菜类</a><br>
                <a href="#">水果类</a><br>
                <a href="#">坚果类</a><br>
                <a href="#">谷物类</a><br>
                <a href="#">肉蛋奶</a><br>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12 link">
                <h5>友情链接</h5>
                <a href="#">链接一</a><br>
                <a href="#">链接二</a><br>
                <a href="#">链接三</a><br>
            </div>
            <footer class="text-center col-sm-12">
                <p>XICP备15060XXX号</p>
                <p>Copyright &copy; 2010-2016</p>
                <p>饮食与健康 版权所有</p>
            </footer>
        </div>
    </div>
</body>
</html>